//@flow

/**
 * 替代react-navigation的tabbarComponent，用于自定义tabbar
 */

import React, { Component } from 'react';
import { 
    View,
    Text,
    TouchableOpacity,
 } from 'react-native';
import { 
    Badge
 } from "antd-mobile-rn";
import { safeAreaHOC } from '../base/safeAreaHOC';
export type ItemDataProps = {

}
export type Props = {

}
type RouteProps = {
    key             :string,
    routeName       :string,
    params          :object,
}
type SceneProps = {
    route           :RouteProps,
    focused         :boolean,
    tintColor       :string,          
}
//获取配置相关的信息，通过props.navigation.state,和prop
export class BottomTabBarComponent extends Component {
    renderTabbarItem = (route:RouteProps,index:number)=>{
        const {
            navigation,
            jumpTo,
            activeTintColor,
            inactiveTintColor,
            getLabelText,
            renderIcon,
        } = this.props;
        //读取当前下标，和焦点下标做比较，相等则表明当前为选中
        const focused:boolean = index === navigation.state.index;
        //获取不同状态下渲染颜色    
        const color :string = focused ? activeTintColor : inactiveTintColor
        //navigation中的那些getLabel,renderIcon等方法接受一个参数类型为SceneProps的对象
        let scene : SceneProps = {
            route:route,
            focused:focused,
            tintColor:color
        }
        return (
            <TouchableOpacity
                key={route.key}
                style={{flex:1,alignItems:'center',justifyContent:'center'}}
                onPress={()=>{
                    this.props.jumpTo(scene.route.routeName)
                }}>
                <Badge dot={true}>{renderIcon(scene)}</Badge>
                <Text style={{color:color,fontSize:10}}>{getLabelText(scene)}</Text>
            </TouchableOpacity>
        )

    }
    render(){   
        console.log(this.props)
        const {
            routes,
        } = this.props.navigation.state
        return (
            <View style={[{height:48,width:'100%',flexDirection:'row'},{...this.props.style}]}>
                {routes && routes.map((route,index)=>{
                    return this.renderTabbarItem(route,index)
                })}
            </View>
        )
    }
}
export const BottomTabBar = safeAreaHOC(BottomTabBarComponent,'bottom')